<template>
  <div>
    <el-card style="margin: 2vw;height: 86vh">
      <div class="up-card">
        <div>
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model.trim="projectInput"></el-input>
        </div>
      </div>
      <div class="down-card">
        <el-table :data="projectData.arr" stripe style="width: 100vw;" height="60vh" :key="Math.random()">


          <el-table-column prop="name" label="项目名称" />

          <el-table-column prop="category" label="项目状态报告">
            <el-button type="primary" @click="getList()">查看</el-button>
            <el-button type="Info">上传</el-button>
            <el-button type="danger">删除</el-button>
          </el-table-column>

          <el-table-column prop="background" label="项目风险">
            <template #default="scope1">

              <el-dialog title="项目风险" :visible.sync="dialogrisk1Visible" center width="50vw">
                <el-table :data="projectData.arr[scope1.$index].risk" stripe style="width: 60vw;" height="66vh"
                  :key="Math.random()">
                  <el-table-column property="riskName" label="风险名称" width="140"></el-table-column>
                  <el-table-column property="state" label="风险状态" width="140"></el-table-column>
                  <el-table-column property="category" label="风险种类" width="120"></el-table-column>
                  <el-table-column property="principal" label="责任人" width="120"></el-table-column>
                  <el-table-column property="priority" label="优先级" width="100"></el-table-column>
                  <el-table-column label="删除">
                    <template slot-scope="scope2">
                      <el-button @click.native.prevent="deleteRow(scope2.$index, projectData.arr[scope1.$index].risk)"
                        type="danger">删除</el-button>
                    </template>
                  </el-table-column>

                </el-table>
              </el-dialog>
              <el-button type="primary" @click=" dialogrisk1Visible = true">查看</el-button>
              <el-button type="info" @click="dialogrisk2Visible = true">新增</el-button>
              <el-dialog title="项目风险" :visible.sync="dialogrisk2Visible" width="40vw">
                <el-form :model="projectRisk" :rules="rules" ref="projectRisk">
                  <el-form-item label="风险名称" label-width='80px' prop="riskName">
                    <el-input v-model="projectRisk.riskName" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                  <el-form-item label="风险状态" label-width='80px' prop="state">
                    <el-input v-model="projectRisk.state" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                  <el-form-item label="风险种类" label-width='80px' prop="category">
                    <el-select v-model="projectRisk.category" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width='80px' prop="principal">
                    <el-input v-model="projectRisk.principal" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                  <el-form-item label="优先级" label-width='80px' prop="priority">
                    <el-input v-model="projectRisk.priority" autocomplete="off" style="width: 15vw;"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogrisk2Visible = false, clear('projectRisk')">取 消</el-button>
                  <el-button type="primary" @click="dialogrisk2Visible = false, pushRisk(scope1.$index), clear()">确
                    定</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>

          <el-table-column prop="background" label="人员管理">
            <template #default="scope3">
              <el-dialog title="人员管理" :visible.sync="dialogmem1Visible" center width="40vw">

                <el-table :data="projectData.arr[scope3.$index].mem" stripe
                  style="width: 30vw;margin: auto;overflow: hidden;" height="40vh" :key="Math.random()">
                  <el-table-column property="memName" label="人员名称" width="140"></el-table-column>
                  <el-table-column label="技能" width="140" type="primary">
                    <template slot-scope="scope6">
                      <el-tag v-for="skill in scope6.row.skills" :key="skill.id">
                        {{ skill.name }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope4">
                      <el-button @click.native.prevent="deleteRow(scope4.$index, projectData.arr[scope3.$index].mem)"
                        type="danger">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>

              <el-dialog title="照片墙" :visible.sync="photoVisible" center width="40vw">
                <el-image style="width: 100px; height: 100px;margin-left: 50px;"
                  :src="require('../../img2e498529-2241-4dd4-8eec-8698a7b502e3.jpg')" fit="fill"></el-image>
                <el-image style="width: 100px; height: 100px;margin-left: 50px;"
                  :src="require('../../img2edce760-e031-497e-9870-2b6ce7cbcddb.jpg')" fit="fill"></el-image>
                <el-image style="width: 100px; height: 100px;margin-left: 50px;"
                  :src="require('../../img9abc0174-9132-42ec-92f0-ba774c4ec0db.jpg')" fit="fill"></el-image>
                <el-image style="width: 100px; height: 100px;margin-left: 50px;"
                  :src="require('../../img55a40865-2477-4afc-8670-b0feeaaeb98d.jpg')" fit="fill"></el-image>
              </el-dialog>
              <el-button type="primary" @click="dialogmem1Visible = true">查看</el-button>
              <el-button type="Info" @click="photoVisible = true">照片墙</el-button>
              <el-button type="info" @click="getPerson()">新增</el-button>

              <el-dialog title="人员管理" :visible.sync="dialogmem2Visible" center width="50vw">
                <div>
                  <el-input placeholder="请输入技能" prefix-icon="el-icon-search" v-model.trim="skillInput"
                    @blur="selectPerson()" style="margin-left: 35vw;width: 10vw;"></el-input>
                </div>
                <el-table :data="member" stripe style="width: 30vw;margin: auto;overflow: hidden;" height="40vh"
                  :key="Math.random()">
                  <el-table-column property="name" label="人员名称" width="140"></el-table-column>
                  <el-table-column label="技能" width="140" type="primary">
                    <template slot-scope="scope6">
                      <el-tag v-for="skill in scope6.row.skills" :key="skill.id">
                        {{ skill.name }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope4">
                      <el-button @click.native.prevent="deleteRow(scope4.$index, projectData.arr[scope3.$index].mem)"
                        type="primary">新增</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIfo.page"
          :page-sizes="[4, 8, 12, 16]" :page-size="pageIfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="projectNum">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { VEProjectApi } from './apis.js'

export default {
  name: 'Status',
  data() {
    return {
      projectInput: '',
      skillInput: '',
      storage: [],
      projectData: {
        arr: [{

        },]
      },
      projectForm: {
        name: '',
        type: '',
        date1: '',
        date2: '',
        status: '',
        background: '',
        skills: [],
        plans: [{ data: '', num: 1 }],
        moduleDtos: [{ name: '', userIds: [] }],
      },
      pageIfo: { page: 1, pageSize: 4, name: '' },
      projectNum: 40,
      projectRisk: {
        riskName: '',
        state: '',
        category: '',
        principal: '',
        priority: ''
      },
      member: [],
      dialogrisk1Visible: false,
      dialogrisk2Visible: false,
      dialogmem1Visible: false,
      dialogmem2Visible: false,
      photoVisible: false,
      options: [{
        value: '选项1',
        label: '人员'
      }, {
        value: '选项2',
        label: '开发过程'
      }, {
        value: '选项3',
        label: '环境'
      }, {
        value: '选项4',
        label: '后勤'
      }, {
        value: '选项5',
        label: '需求'
      }, {
        value: '选项6',
        label: '进度'
      },
      ],
      rules: {
        riskName: [{ required: true, message: '请输入风险名称', trigger: 'blur' }],
        state: [{ required: true, message: '请输入风险状态', trigger: 'blur' }],
        category: [{ required: true, message: '请选择风险种类', trigger: 'blur' }],
        principal: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
        priority: [{ required: true, message: '请输入优先级', trigger: 'blur' }],
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    selectPerson() {
      let id = '';
      if (this.skillInput === '测试') {
        id = '547151851682922496';
      }
      else if (this.skillInput === '前端') {
        id = '547151140454793216';
      }
      else if (this.skillInput === '后端') {
        id = '547151501424984064';
      }
      else if (this.skillInput === '文档编写') {
        id = '547151851582259200';
      }
      else {
        id = '';
      }
      if (id != '') {
        this.member = this.storage.filter(item => {
          return item.skills.some(skill => {
            return skill.id === id;
          })
        })
      }
      else {
        this.member = this.storage;
      }
    },
    getPerson() {
      let that = this;
      that.member = [];
      this.dialogmem2Visible = true;
      // VEPersonApi({ page: 1, size: 20, skillIds: '' }).then(res => {
      //   that.member = res.data.content;
      //   that.storage = res.data.content;
      // })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      this.pageIfo.page = 1;
      this.pageIfo.pageSize = Number(val);
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIfo.page = Number(val);
      this.getList();
    },
    getList() {
      let that = this;
      that.projectData.arr = [];
      VEProjectApi({ page: this.pageIfo.page, size: this.pageIfo.pageSize }).then(res => {

        that.projectNum = res.data.totalElements;
        that.projectData.arr = res.data.content;

        for (let i = 0; i < that.projectData.arr; i++) {
          that.projectData.arr[i].stages = JSON.parse(that.projectData.arr[i].stages);
        }

      })

    },
    pushRisk(val) {
      this.projectData.arr[val].risk.push(this.projectRisk);
    },
    clear(formName) {
      formName && this.$refs[formName].resetFields();
      this.projectRisk = {
        riskName: '',
        state: '',
        category: '',
        principal: '',
        priority: ''
      };
    },

  },
}
</script>

<style lang="scss">
.el-dialog {
  border-radius: 20px;
}
</style>

<style scoped>
.up-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.down-card {
  margin-top: 20px;
  width: 100%;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10vh;

}


.el-tag+.el-tag {
  margin-left: 10px;
}
</style>
